<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <title>我的十二星座</title>
    <link rel="stylesheet" href="css/wap/main.css"/>
</head>
<body style="background:url(images/wap/xingzuo/my_bg.png) repeat -1.6rem -8rem;">
    <div class="exchange_mask xz_mask">
        <p class="mask_p1">温馨提示</p>
        <p class="mask_p2">恭喜您，成功帮助小明解锁白羊座！</p>
        <p class="mask_p3 xz_open"><a>确定</a></p>
    </div>
    <div class="Mask"></div>
    <div class="xz_describe">            
        <div class="xz_txt">
            <h4>白羊座<span>×</span></h4>
            <p>简介：</p>
            <p>
                <span>拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体育课体育日体</span>
                <img src="images/wap/xingzuo/baiyang.png" alt="">
            </p>
            <p>特点：</p>
            <p>
                <span>拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一
                </span>
                <span>拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体</span>
                <span>拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体拉开绝对是弗兰克拉卡斯法师打发斯蒂芬沙发对于体育聚焦于看一看体</span>
            </p>
        </div>
    </div>
    <div class="xz_my">
        <p>
            <img src="images/wap/xingzuo/my_title.png" alt="">
        </p>
        <div id="list">
            <div>"小"帮您解锁了白羊座</div>
            <div>"小明小明小明小明"帮您解锁了白羊座</div>
        </div>
        <p><a href="">我的兑换记录</a></p>
        <ul>
            <li>
                <img src="images/wap/xingzuo/baiyang1.png" alt="">
                <img src="images/wap/xingzuo/baiyang.png" alt="">
                <a class="xz_open">
                    <img src="images/wap/xingzuo/xz_open1.png" alt="">
                    <img src="images/wap/xingzuo/xz_open2.png" alt="">
                </a>
            </li>
            <li>
                <img src="images/wap/xingzuo/jinniu1.png" alt="">
                <img src="images/wap/xingzuo/jinniu.png" alt="">
                <a class="xz_open">
                    <img src="images/wap/xingzuo/xz_open1.png" alt="">
                    <img src="images/wap/xingzuo/xz_open2.png" alt="">
                </a>
            </li>
            <li>
                <img src="images/wap/xingzuo/shuangzi1.png" alt="">
                <img src="images/wap/xingzuo/shuangzi.png" alt="">
                <a class="xz_open">
                    <img src="images/wap/xingzuo/xz_open1.png" alt="">
                    <img src="images/wap/xingzuo/xz_open2.png" alt="">
                </a>
            </li>
            <li>
                <img src="images/wap/xingzuo/juxie1.png" alt="">
                <img src="images/wap/xingzuo/juxie.png" alt="">
                <a class="xz_open">
                    <img src="images/wap/xingzuo/xz_open1.png" alt="">
                    <img src="images/wap/xingzuo/xz_open2.png" alt="">
                </a>
            </li>
            <li>
                <img src="images/wap/xingzuo/shizi1.png" alt="">
                <img src="images/wap/xingzuo/shizi.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/chunv1.png" alt="">
                <img src="images/wap/xingzuo/chunv.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/tiancheng1.png" alt="">
                <img src="images/wap/xingzuo/tiancheng.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/tianxie1.png" alt="">
                <img src="images/wap/xingzuo/tianxie.png" alt="">
            </li>
            <li >
                <img src="images/wap/xingzuo/sheshou1.png" alt="">
                <img src="images/wap/xingzuo/sheshou.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/mojie1.png" alt="">
                <img src="images/wap/xingzuo/mojie.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/shuiping1.png" alt="">
                <img src="images/wap/xingzuo/shuiping.png" alt="">
            </li>
            <li>
                <img src="images/wap/xingzuo/shuangyu1.png" alt="">
                <img src="images/wap/xingzuo/shuangyu.png" alt="">
            </li>
        </ul>
        <p class="xz_myBtn">
            <a href="">
                <img src="images/wap/xingzuo/my_exchange.png" alt="">
            </a>
            <a class="Myshare">
                <img src="images/wap/xingzuo/my_invite.png" alt="">
            </a>
        </p>
        <p class="xz_rule">
            <span>活动规则:</span><br>
            <span>1.邀请好友解锁“十二星座”，集满后可参与“一元购”活动。</span><br>
            <span>2.可重复解锁“十二星座”，持续兑换商品</span>
        </p>
    </div>
    <div class="xz_describe xzShare">
        <p><img src="images/wap/xingzuo/share_arrow.png" alt=""></p>
    </div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
        // 解锁消息滚动
        var $ = $ || window;
        $.get = function (expr) {
            function clsMatcher(className){
                return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
            }
            var e = typeof expr == "string" ? document.getElementById(expr) : expr;
            var elem = {
                dom:e,
                addClass:function(className) {
                    var oldCls = e.className;
                    e.className = !oldCls ?
                            className :
                            clsMatcher(className).test(oldCls) ?
                                    oldCls : [oldCls,className].join(" ");
                    return this;
                },remove:function() {
                    e.parentNode && e.parentNode.removeChild(e);
                    return this;
                },removeClass:function(className){
                    e.className =(e.className||"").replace(clsMatcher(className),"$1$2");
                    return this;
                },on:function(type, callback) {
                    if (window.attachEvent)
                        e.attachEvent("on" + type, callback);
                    else
                        e.addEventListener(type, callback, false);
                    return this;
                },first:function(type) {
                    var children = e.childNodes;
                    for (var k = 0; k < children.length; k++) {
                        if (children[k].nodeType == 3)
                            continue;
                        if (!type || children[k].tagName.toLowerCase() == type.toLowerCase())
                            return $.get(children[k]);
                    }
                },appendTo:function(parent){
                    var p=parent.dom||parent;
                    p.appendChild(e);
                    return this;
                }
            };
            var directions = ["Left","Top"];
            for (var i = 0; i < directions.length; i++) {
                var method = "scroll" + directions[i];
                elem[method] = function(val) {
                    return arguments.length ? e[method] = val : e[method];
                };
            }
            var sides = ["Width","Height"];
            for (var i = 0; i < sides.length; i++) {
                var side = sides[i];
                elem[side.toLowerCase()] = function(val) {
                    if (arguments.length) {
                        e.style[side.toLowerCase()] = val + "px";
                        return this;
                    }
                    return  e["offset" + side] || e[side];
                }
            }
            return elem;
        };
        function Timer(c) {
            var thread;
            var delay = c.delay ||70;
            var runner = c.run || typeof c == "function" ? c : function() {
            };
            this.start = function() {
                !thread && (thread = window.setInterval(runner, delay));
                return this;
            }
            this.stop = function() {
                var snapshot = thread;
                thread = null;
                snapshot && window.clearInterval(snapshot);
                return this;
            }

        }
        var list = $.get("list").addClass("list");
        var increment = 1;
        var timer = new Timer(function() {
            var offset = list.scrollTop();
            var first = list.first().addClass('active');
            if (offset >= first.height()) {
                list.first().removeClass('active').remove().appendTo(list);
                list.scrollTop(increment);
            } else {
                list.scrollTop(Math.min(offset + increment,first.height()));
            }
        });
        timer.start();
        list.on("mouseover", timer.stop).on("mouseout", timer.start);

        // 星座的宽和高
        var liWidth=parseInt($('.xz_my ul li').css("width"));
        console.log($('.xz_my ul li').css("width"));
        var liHeight=liWidth*1.115+'px';
        console.log(liHeight);
        $('.xz_my ul li').css({"height":liHeight});
        var suoWidth1=liWidth*0.664+'px';
        var suoWidth2=liWidth*0.344+'px';
        // 锁的宽和高
        $('.xz_my ul li a img:nth-child(1)').css({"width":suoWidth1});
        $('.xz_my ul li a img:nth-child(2)').css({"width":suoWidth2});
        
        // 星座解锁过程
        $('.xz_my ul').on('click','li:eq(0)',function(){
            console.log(1111);
            var isOpen=0;
            if(isOpen==1){
                $('.xz_describe').fadeIn();
            }else{
                console.log($(this).children());
                $('.Mask').css({"display":"block"});
                $('.xz_mask').css({"display":"block"});
                $(".xz_open a").click(function(){
                    $('.xz_mask').css({"display":"none"});
                    $('.Mask').css({"display":"none"});
                    setTimeout(function(){
                        $('.xz_my ul li:eq(0)').children().eq(2).children().eq(0).toggleClass('xz_rotateLeft');
                        $('.xz_my ul li:eq(0)').children().eq(2).children().eq(1).toggleClass('xz_rotateRight');
                        $('.xz_my ul li:eq(0)').children().eq(2).fadeOut();
                        $('.xz_my ul li:eq(0)').children().eq(0).css({"display":"none"});
                        $('.xz_my ul li:eq(0)').children().eq(1).css({"display":"block"});
                        },200);
                });
                
            }
        });
        $('.xz_my ul').on('click','li:eq(1)',function(){
            if(!ddClick){
                var isOpen=0;
                console.log($(this).index());
                if(isOpen==1){
                    $('.xz_describe').fadeIn();
                }else{
                    console.log($(this).children());
                    $('.xz_mask').css({"display":"block"});
                    $(".xz_open a").click(function(){
                        console.log(111);
                        $('.xz_mask').css({"display":"none"});
                        setTimeout(function(){
                            console.log(12);
                            $('.xz_my ul li:eq(1)').children().eq(2).children().eq(0).toggleClass('xz_rotateLeft');
                            $('.xz_my ul li:eq(1)').children().eq(2).children().eq(1).toggleClass('xz_rotateRight');
                            $('.xz_my ul li:eq(1)').children().eq(2).fadeOut();
                            $('.xz_my ul li:eq(1)').children().eq(0).css({"display":"none"});
                            $('.xz_my ul li:eq(1)').children().eq(1).css({"display":"block"});
                        },200);
                    });     
                }
            }
        });
        
        // 星座描述弹出框
        $('.xz_txt h4 span').click(function(){
            $(this).parent().parent().parent().fadeOut();
        });

        $(".Myshare").click(function(){
            console.log(11);
            $('.xzShare').fadeIn();
            $(".xzShare").click(function(){
                $(this).fadeOut();
            });
        });
    </script>
</body>
</html>























